<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <title>中秋快乐</title>
  <script src="./js/jquery.mini.js"></script>

  <link rel="stylesheet" href="./css/index.css">

</head>

<body>
  
  
  <div class="box">
    <span data-text="中秋快乐"></span>
    <span data-text="中秋快乐"></span>
    <span data-text="中秋快乐"></span>
    <span data-text="中秋快乐"></span>
    <span data-text="中秋快乐"></span>
  </div>
  <audio id="bgmusic" src="./music/杨千嬅、任贤齐 - 花好月圆夜.mp3" autoplay="autoplay" loop="loop" preload="auto" ></audio>
      <script type="text/javascript">

        $(function () {
          $('.box').on("click",function(){
            var music = document.getElementById("bgmusic")
             if (music.paused) {
              music.play()}
              else {
               music.pause()}
          })
        })
      </script>

</body>

</html>